import React from 'react';
import { connect } from 'react-redux';

import Tabs from 'material-ui/lib/tabs/tabs';
import Tab from 'material-ui/lib/tabs/tab';
import FlatButton from 'material-ui/lib/flat-button';
import TextField from 'material-ui/lib/TextField';

import { StudentFilter } from '../../components/smart/filter';
import ChartGroup from '../../components/smart/ChartGroup';

import StudentRetainedTableChart from '../../components/dump/charts/StudentRetainedTableChart';

import omit from 'lodash/object/omit';

import { ENUM_VIEW, DATE_FORMATTER } from '../../../schema/constants';
import { setCondition } from '../../actions/fixup-work/conditionAction';
import moment from 'moment';

import * as ACTIONS from '../../actions/independent-practice/depthMissionAction';

function mapStateToProps(state) {
	return {
		depthMission: state.depthMission,
		condition: state.chart.condition
	};
}

export class DepthMission extends React.Component {
	static propTypes = {
		name: React.PropTypes.string,
	};

	state = {
		currentTimeUnit: ENUM_VIEW.DAY,
		type: ACTIONS.TypeOption.TIMES,
		cycle: 7
	};

	constructor(props) {
		super(props);
	}

	render() {
		let { depthMission, condition } = this.props;
        let { startDate, endDate } = condition;
        let { currentTimeUnit,
            type, cycle, actionText } = this.state;

        let { averageCountData, averageTimesData, summary } = depthMission;

        let hintText = '';
        if (currentTimeUnit == ENUM_VIEW.DAY)
        	hintText = '天';
        else if (currentTimeUnit == ENUM_VIEW.WEEK)
        	hintText = '周';
        else if (currentTimeUnit == ENUM_VIEW.MONTH)
        	hintText = '月';

		return (
			<div className='panel'>
                <StudentFilter onSearch={this.handleSearch} />
                <ChartGroup
                    onDateRangeChange={this.handleDateRangeChange}
                    startDate={startDate}
                    endDate={endDate}>
                    <Tabs
                        onChange={this.handleTimeUnitChange}
                        value={currentTimeUnit}>
                        <Tab label='日' value={ENUM_VIEW.DAY}></Tab>
                        <Tab label='周' value={ENUM_VIEW.WEEK}></Tab>
                        <Tab label='月' value={ENUM_VIEW.MONTH}></Tab>
                    </Tabs>
                    <div style={{textAlign: 'center', padding: 10 }}>
                        <FlatButton label='留存率' secondary={type == ACTIONS.TypeOption.RATE}
                            onClick={() => this.handleTypeChange(ACTIONS.TypeOption.RATE)} />
						<FlatButton label='留存数' secondary={type == ACTIONS.TypeOption.COUNT}
							onClick={() => this.handleTypeChange(ACTIONS.TypeOption.COUNT)} />
						<TextField
							style={{width: 100, marginLeft: 10}}
							onInput={this.handleCycleInput}
							value={cycle}
					      	hintText={hintText}
					      	floatingLabelText={`周期长度`}
					      	floatingLabelFixed={true}
					    />
					</div>
                    <div className='chart'>
                    {type == ACTIONS.TypeOption.COUNT &&
                        <StudentRetainedTableChart dataSource={summary} type={ACTIONS.TypeOption.COUNT} cycle={cycle} cycleUnit={hintText} />
                    }
                    {type == ACTIONS.TypeOption.RATE &&
                        <StudentRetainedTableChart dataSource={summary} type={ACTIONS.TypeOption.RATE} cycle={cycle} cycleUnit={hintText} />
                    }
                	</div>
                </ChartGroup>
            </div>
		);
	}
}

export default connect(
	mapStateToProps,
	// Implement map dispatch to props
)(DepthMission)
